<div class="container">
    <div class="row">
        <div class="col-lg-5 logoStyle"><img src="../img/logoTransparent.png"></div>
        <div class="col-lg-2 text-primary registerWord">欢迎注册</div>
        <div class="col-lg-2 pull-right">已有账号 <a href="#" class="registerWord">请登录</a></div>
    </div>
    <div class="row">
        <form id="userRegisterForm" role="form">
            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" [class.inputSucceed]="usernameSucceed"
                           [class.inputDefeat]="usernameDefeat"
                           placeholder="请输入用户名" required
                           [(ngModel)] = "inputContent.username"
                           (blur)="checkUsernameBlur(username.value)"
                           (focus)="checkUsernameFocus()"
                           (keyup)="checkUsernameKeyUp()"
                           #username>
                    <div class="hintMessage" [class.hiddenHint]="formInputHidden.hiddenUsernameHint">最多六个汉字或最多12个英文字母
                    </div>
                </div>

                <span class="mistakeMessage">{{errorMessages.usernameError}}</span>
            </div>
            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="password">设置密码</label>
                    <input type="password" class="form-control" id="password"
                           [class.inputSucceed]="passwordSucceed"
                           [class.inputDefeat]="passwordDefeat"
                           placeholder="建议至少使用两种字符组合" required
                           [(ngModel)]="inputContent.password"
                           (blur)="checkPasswordBlur(password.value)"
                           (focus)="checkPasswordFocus()"
                           (keyup)="checkPasswordKeyUp(password.value)"
                           #password>
                    <div class="hintMessage hiddenHint" [class.hiddenHint]="formInputHidden.hiddenPasswordHint">
                        密码位数不少于6位且不多于16位
                    </div>
                </div>
                <span class="mistakeMessage">{{errorMessages.passwordError}}</span>
            </div>
            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="confirm">确认密码</label>
                    <input type="password" class="form-control" id="confirm"
                           placeholder="请再次输入密码" required
                           [class.inputSucceed]="confirmSucceed"
                           [class.inputDefeat]="confirmDefeat"
                           [(ngModel)]="inputContent.confirm"
                           (focus)="checkConfirmFocus()"
                           (blur)="checkConfirmBlur()"
                           (keyup)="checkConfirmKeyUp()">
                    <div class="hintMessage hiddenHint" [class.hiddenHint]="formInputHidden.hiddenConfirmHint">请重新输入密码
                    </div>
                </div>
                <span class="mistakeMessage">{{errorMessages.confirmError}}</span>
            </div>
            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="phone">手机号</label>
                    <input type="text" class="form-control" id="phone"
                           placeholder="建议使用常用手机" required
                           [class.inputSucceed]="phoneSucceed"
                           [class.inputDefeat]="phoneDefeat"
                           [(ngModel)]="inputContent.phone"
                           (focus)="checkPhoneFocus()"
                           (blur)="checkPhoneBlur(phone.value)"
                           (keyup)="checkPhoneKeyUp(phone.value)"
                           #phone>
                    <div class="hintMessage hiddenHint" [class.hiddenHint]="formInputHidden.hiddenPhoneHint">
                        为了购物轻松愉快，请输入您的手机号
                    </div>
                </div>
                <div style="position:relative">
                    <button id="obtainVerificationCode" type="button" class="btn btn-primary">获取验证码</button>
                </div>
                <span class="mistakeMessage">{{errorMessages.phoneError}}</span>
            </div>
            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="phoneVerificationCode">手机验证码</label>
                    <input type="text" class="form-control" id="phoneVerificationCode"
                           placeholder="请输入手机验证码" required
                           [class.inputSucceed]="phoneVerificationCodeSucceed"
                           [class.inputDefeat]="phoneVerificationCodeDefeat"
                           [(ngModel)]="inputContent.phoneVerificationCode"
                           (focus)="checkPhoneVerificationCodeFocus()"
                           (blur)="checkPhoneVerificationCodeBlur(phoneVerificationCode.value)"
                           (keyup)="checkPhoneVerificationCodeKeyUp(phoneVerificationCode.value)"
                           #phoneVerificationCode>
                    <div class="hintMessage hiddenHint"
                         [class.hiddenHint]="formInputHidden.hiddenPhoneVerificationCodeHint">
                        请输入8888以作为验证码
                    </div>
                </div>
                <span class="mistakeMessage">{{errorMessages.phoneVerificationCodeError}}</span>
            </div>
            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="verificationCode">验证码</label>
                    <input type="text" class="form-control" id="verificationCode"
                           placeholder="请输入验证码" required
                           [class.inputSucceed]="verificationCodeSucceed"
                           [class.inputDefeat]="verificationCodeDefeat"
                           [(ngModel)]="inputContent.verificationCode"
                           (focus)="verificationCodeFocus()"
                           (blur)="verificationCodeBlur(verificationCode.value)"
                           (keyup)="verificationCodeKeyUp(verificationCode.value)"
                           #verificationCode>
                    <div class="hintMessage hiddenHint" [class.hiddenHint]="formInputHidden.hiddenVerificationCodeHint">
                        看不清？请点击右侧的验证码图标
                    </div>
                </div>
                <div style="position:relative">
                    <img id="verificationCodeImg" (click)="onloadVerificationImage()"/>
                </div>
                <span class="mistakeMessage">{{errorMessages.verificationCodeError}}</span>
            </div>
            <div class="row">
                <div class="checkbox col-lg-6">
                    <label>
                        <input id="clause" type="checkbox" [(ngModel)]="inputContent.clause" (change)="clauseChange()"> 我已阅读并同意<a href="#">条款</a>
                    </label>
                </div>
                <span class="mistakeMessage" style="top: 10px;left: -354px;">{{errorMessages.clauseError}}</span>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <button type="button" class="btn btn-primary" (click)="submitRegister()">立即注册</button>
                </div>
            </div>
        </form>
    </div>
</div>